<template>
    <div>
        <!-- 折叠按钮 -->
        <!-- <el-button @click="toggleCollapse" icon="el-icon-s-fold" style="position: fixed; left: 10px; top: 10px; z-index: 999;">折叠</el-button> -->
        <el-menu
          :default-active="activeMenu"
          mode="vertical"
          :collapse="isCollapse"
          @select="handleSelect"
        >
          <el-menu-item index="dashboard">
            <el-icon :size="20">
                <Menu />
            </el-icon> <!-- 图标 -->
            <span v-if="!isCollapse">直流电源展示</span>
          </el-menu-item>
          <el-menu-item index="alarmmanage">
            <el-icon :size="20">
                <Bell />
            </el-icon> <!-- 图标 -->
            <span v-if="!isCollapse">告警管理</span>
          </el-menu-item>
          <el-menu-item index="electrical">
            <el-icon :size="20">
                <Setting />
            </el-icon> <!-- 图标 -->
            <span v-if="!isCollapse">电气元器件管理</span>
          </el-menu-item>
          <el-menu-item index="collectdata">
            <el-icon :size="20">
                <EditPen />
            </el-icon> <!-- 图标 -->
            <span v-if="!isCollapse">采集数据</span>
          </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        // 从本地存储中获取 activeMenu 的值，如果没有则使用默认值 'dashboard'
        const savedActiveMenu = localStorage.getItem('activeMenu') || 'dashboard';
        return {
            activeMenu: savedActiveMenu,
            isCollapse: false // 新增：菜单是否折叠的状态
        };
    },
    mounted() {
        // 在组件挂载后，确保 activeMenu 的值正确应用
        this.activeMenu = localStorage.getItem('activeMenu') || 'dashboard';
        // 手动触发路由跳转，确保默认页显示
        this.$router.push({ name: this.activeMenu });
    },
    methods: {
        handleSelect(key) {
            this.activeMenu = key;
            // 将选中的菜单项保存到本地存储中
            localStorage.setItem('activeMenu', key);
            this.$router.push({ name: key });
        },
        // 新增：切换菜单折叠状态的方法
        toggleCollapse() {
            this.isCollapse = !this.isCollapse;
        }
    }
};
</script>

<style scoped>
.el-menu {
    height: 100vh;
    width: 180px; /* 设定菜单宽度 */
    position: fixed; /* 固定定位 */
    left: 0;
    top: 0;
    background-color: #fff; /* 背景颜色 */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    transition: width 0.3s; /* 新增：过渡效果 */
}

.el-menu.is-collapse {
    width: 60px; /* 折叠后的宽度 */
}
</style>